<h2>my Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes" [class.selected]="hero===selectedHero" (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span>{{hero.name}}
        <button class="delete" (click)="delete(hero);$event.stopPropagation()">X</button>
    </li>
</ul>
<div *ngIf="selectedHero">
    <h2>{{selectedHero.name|uppercase}} is my hero</h2>
    <button (click)="gotoDetail()">view detail</button>
</div>
<label>Hero name:</label><input #heroName/>
<button (click)="add(heroName.value);heroName.value=''">add</button>